<div class="torque">
    <div class="torque_top">项链及吊坠</div>
    <div class="torque_bot">
        <div class="torque_box">
            <div><a href="./torque.html"><img src="//media.tiffany.cn/is/image/tiffanydm/QuickLink_464x464_ChainNecklaces?$tile$&" alt=""></a></div>
            <p>链环设计</p>
        </div>
        <div class="torque_box">
            <div><a href="./torque.html"><img src="//media.tiffany.cn/is/image/tiffanydm/QuickLink_464x464_EverydayDiaNecklaces?$tile$&" alt=""></a>
            </div>
            <p>每日优雅</p>
        </div>
        <div class="torque_box">
            <div><a href="./torque.html"><img src="//media.tiffany.cn/is/image/tiffanydm/QuickLink_464x464_StatementNecklaces?$tile$&" alt=""></a>
            </div>
            <p>独特个性</p>
        </div>
        <div class="torque_box">
            <div><a href="./torque.html"><img src="//media.tiffany.cn/is/image/tiffanydm/QuickLink_464x464_LayeringNecklaces?$tile$&" alt=""></a>
            </div>
            <p>叠搭之选</p>
        </div>
    </div>
</div>
<div class="list">
    <div class="list_cen">
        <div class="list_tit"><span>首页</span> / <span>珠宝首饰- 蒂芙尼经典系列- 蒂芙尼官网</span> </div>
        <div class="list_screen">
            <div class="screen_lef">
                <span class="sp1">筛选方式</span>
                <span class="sp2">系列和设计师</span>
                <span class="sp3">材质</span>
                <span class="sp4">宝石</span>
                <span class="sp5">价格</span>
            </div>
            <div class="screen_rig">
                <span class="sp1">排序方式:</span>
                <span class="sp2">推荐</span>
            </div>
        </div>
        <div class="shop_show">
            <div class="shop_show_box">
                <img src="https://media.tiffany.cn/is/image/Tiffany/EcomBrowseM/reader-tote-tiffany-t-smile-35189432_1009333_ED.jpg?hei=384&wid=384" alt="">
                <div class="hover_box">
                    <div class="hover_tu">
                        <div class="tu_box"><img src="https://media.tiffany.cn/is/image/Tiffany/EcomBrowseM/reader-tote-tiffany-t-smile-35189432_1009333_ED.jpg?hei=384&wid=384" alt=""></div>
                    </div>
                    <div class="a">Tiffany T 系列 18K 玫瑰金 Smile 项链，小号</div>
                    <div class="b">
                        <p class="p1">￥8450</p>
                        <p class="p2">添加至购物袋</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        var shop_box = document.querySelector(".shop_show")
        $.ajax({
            url: "./iconfont/data.json"
        })
            .then(function (res) {
                render(res.datas);
            })
        function render(list) {
                goods_data = list; 
            
            shop_box.innerHTML = list.map(function (item , index) {
                return `<div class="shop_show_box">
                <img src="${item.image}">
                <div class="hover_box">
                    <div class="hover_tu">
                        <div class="tu_box"><img data-id=${index} src="${item.image} " alt=""></div>
                    </div>
                    <div class="a">${item.title}</div>
                    <div class="b" data-id=${index}>
                        <p class="p1">￥${item.price}</p>
                        <p class="p2">添加至购物袋</p>
                    </div>
                </div>
            </div>`
            }).join("");
        }
        $(".shop_show").on("click" , ".hover_box .hover_tu .tu_box img" , function(){
            addCart_one( $(this).attr("data-id") )
            // console.log($(this).attr("data-id"));
        })
        $(".shop_show").on("click" , ".hover_box .b" , function(){
            addCart( $(this).attr("data-id") )
            // console.log($(this).attr("data-id"))
        })
        var goods_data = null;

        var cart = (function(){ 
             
            if(localStorage.getItem("cart")){
                var data = null
                try{
                    data =  JSON.parse(localStorage.getItem("cart"))
                }catch(e){
                    data = {}
                }
                return data;
            }else{
                return {}
            }
        })();
        // console.log(cart)
        function addCart( id ){
            if(id in cart){
                cart[id].count ++
            }else{
                goods_data[id].count = 1;
                cart[id] = goods_data[id];
            }
            cart[id] = goods_data[id]

            // console.log(cart)
            // localStorage.clear("cart")
            localStorage.setItem("cart" , JSON.stringify(cart))
        }
        function addCart_one( id ){
            // console.log(goods_data[id])
            var name = (Math.random() + "").slice(2) + Date.now();
            localStorage.setItem( name , JSON.stringify(goods_data[id])) 
            open("./details.html#" + name);
        }
    })
</script>
<script>

</script>